<script setup lang="ts">
import Menu from './Menu.vue';
</script>

<template>
    <!-- 这里是整个页面的布局 -->
    <div class="container">
        <!-- 这里是头部 -->
        <div class="header">ECharts数据可视化</div>
        <!-- 这里是主体 -->
        <div class="main">
            <!-- 这里是左侧导航 -->
            <div class="nav">
                <Menu />
            </div>
            <!-- 这里是图表内容 -->
            <div class="chart-content">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
$background-color-header: #2f363c;
$background-color-nav: #545c64;
$background-color-main: #545c64;

@import '@/styles/scss_var.scss';

.container {
    display: flex;
    flex-direction: column;

    .header {
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 60px;
        line-height: 60px;
        font-size: 36px;
        background-color: $background-color-header;
        color: #f9f9f9;
    }

    .main {
        width: 100vw;
        height: calc(100vh - 60px);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        background-color: $background-color-main;
    }

    .nav {
        background-color: $background-color-nav;
        min-width: 65px;
        width: 150px;
    }

    .chart-content {
        flex: 1;
    }
}
</style>
